<template>
  <div>
    <el-card shadow="never" body-style="padding:24px;">
      <div style="margin-top: 16px; padding-bottom: 8px;border-bottom: 1px solid #dadcde;">
        <el-row type="flex" justify="space-between">
          <el-col :span="12">
            <div class="condition-title" style="line-height: 32px;">{{$t("message.filterCondition")}}</div>
          </el-col>
          <el-col :span="12">
            <div class="float-right" style="margin-left: 14px">
              <el-button @click="reset">{{$t("message.reset")}}</el-button>
              <el-button @click="search" type="primary">{{$t("message.filter")}}</el-button>
            </div>
            <div class="float-right">
              <el-form :model="condition" label-width="50px" ref="conditionForm">
                <el-form-item :label="$t('label.grade') + ':'" prop="grade">
                  <el-select v-model="condition.grade" style="width: 100%" filterable clearable>
                    <el-option v-for="item in options.grade" :key="item.id" :label="item.value" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 24px" v-if="generalCourseTableData[1] && generalCourseTableData[1].data.length"
        class="generaTable">
        <edu-table :data="generalCourseTableData" :order="false" :pagination="false" border :selection="false"
          :merge='true' :show-header="false" :stripe="false" :rowStyle="rowStyle" style="width: 100%;">
          <edu-table-column v-for="(item, key) in generalCourseTableData[1].data" :key="key" min-width="280" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.data[key]">
                <el-form label-width="150px">
                  <el-form-item :label="scope.row.data[key].labName + ':'">
                    <el-input v-model="scope.row.data[key].credit" type="number" min="0" style="width: 100%"></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </template>
          </edu-table-column>
        </edu-table>
        <div class="float-right" style="margin-top: 16px;">
          <el-button @click="cancel">{{$t("message.cancel")}}</el-button>
          <el-button @click="confirm" type="primary">{{$t("message.confirm")}}</el-button>
        </div>
      </div>
    </el-card>
  </div>

</template>
<script>
  import {
    GRADUATIONYEAR
  } from '../components/gradMangeUtis';
  import api from 'common/src/api/graduationManagement/graduationManage';
  export default {
    data() {
      return {
        condition: {
          grade: ''
        },
        options: {
          grade: GRADUATIONYEAR
        },
        generalCourseTableData: [],
        cacheData: [],
        isOverseas: '0'
      }
    },
    created() {},
    methods: {
      reset() {
        this.$refs.conditionForm.resetFields();
        this.generalCourseTableData = [];
        this.cacheData = [];
      },
      search() {
        this.getStandard();
      },
      getStandard() {
        if (this.condition.grade) {
          this.generalCourseTableData = [];
          this.cacheData = [];
          let params = {
            ...this.condition
          };
          api.geStandardLabel(params).then(res => {
            if (res && res.code === 200) {
              let {
                ElectiveStandard
              } = res.data || {};
              this.handleElectiveStandard(ElectiveStandard);
            }
          });
        }
      },
      handleElectiveStandard(param) {
        if (!param) {
          return;
        }
        this.ElectiveStandardData = param;
        this.cacheData = _.cloneDeep(param);
        let totals = 0;
        let data = param.filter(v => {
          if (v.orderNum === 999) {
            totals = v.credit;
          }
          return v.orderNum !== 999;
        })
        let len = data.length;
        let index = 1;
        let list = [{
          data: [{
            labName: this.$t('auditStandard.creditStandardGeneralCourses'),
            credit: 0
          }]
        }];
        let calcuTotal = 0;
        for (let i = 0; i < len; i++) {
          data[i].credit && (calcuTotal += Number(data[i].credit));
          if (i !== 0 && i % 4 === 0) {
            index++;
          }
          if (!list[index]) {
            list[index] = {
              data: []
            };
          }
          data[i].credit = data[i].credit || 0;
          list[index].data.push(data[i]);
        }
        list[0].columnList = [{
          index: 0,
          rowspan: 1,
          colspan: list[1].data.length
        }];
        list[0].data[0].credit = totals || calcuTotal;
        this.generalCourseTableData = list;
      },
      rowStyle({
        rowIndex
      }) {
        if (rowIndex === 0) {
          return "background: #f4f7fa";
        }
      },
      confirm() {
        let params = [];
        if (this.ElectiveStandardData) {
          let isExist = false;
          this.ElectiveStandardData.forEach(item => {
            let paramItem = {
              label: item.labID,
              labelName: item.labName,
              parentLabel: item.parentLabID,
              parentLabelName: item.parentLabName,
              credits: Number(item.credit),
              isOverseas: this.isOverseas,
              ...this.condition
            }
            if (item.orderNum === 999) {
              isExist = true;
              paramItem.credits = Number(this.generalCourseTableData[0].data[0].credit);
              paramItem.label = 999;
            }
            params.push(paramItem);
          });
          if (!isExist) {
            params.push({
              label: 999,
              credits: Number(this.generalCourseTableData[0].data[0].credit),
              isOverseas: this.isOverseas,
              grade: this.condition.grade
            })
          }
          api.saveStandardElective(params).then(res => {
            this.getStandard();
          })
        }
      },
      cancel() {
        this.handleElectiveStandard(this.cacheData);
      }
    }
  }

</script>
<style scoped lang="scss">
  .generaTable ::v-deep .el-form-item {
    margin-bottom: 0px;
  }

</style>
